import React from "react";
import { Map, List, fromJS } from "immutable";
declare let window: any;
const { msg, xKit, BusinessDataCenter, commonComp } = window.xDllContext;
const ImgComp = commonComp.xImage;
export default class AdScreenTopBar extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      videoing: 0,
      isShow: false,
      pythonTime: ""
    };
  }

  static displayName = "AdScreenTopBar";

  static defaultProps = {};
  componentDidMount() {
    document.getElementsByTagName("video")[0].play();
    // this.video.setAttribute("webkit-playsinline", true);
  }
  componentDidUpdate(prevProps, prevState) {
    // this.video.setAttribute("webkit-playsinline", true);
    // this.video.play();
  }

  render() {
    const { items, style, ENV_EDITING, dataWidgetPath } = this.props;
    const { isShow, pythonTime } = this.state;
    const videoList: any[] = [];
    items.toJS().map((item, index) => {
      return videoList.push(item.src);
    });
    const videoSrc = videoList[this.state.videoing];

    return (
      <div className={ENV_EDITING ? "top-edit" : "top-display"}>
        <video
          preload="auto"
          autoPlay
          poster="https://qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/ad-screen/statics/ad-screen/loding.gif"
          style={{
            borderRadius: ENV_EDITING ? "20px" : "46px"
          }}
          src={videoSrc}
          loop
        />
        {style.get("splitScreen") === 2 && (
          <div
            style={{
              width: "100%",
              background: "#000",
              position: "absolute",
              zIndex: 10,
              height: ENV_EDITING ? "10px" : "30px",
              bottom: ENV_EDITING ? "-10px" : "-30px"
            }}
          />
        )}
      </div>
    );
  }
  // onEnded = () => {
  //   let { videoing } = this.state;
  //   let { items, style } = this.props;
  //   let size = items.size;
  //   if (style.get('playType') === 1) {
  //     this.setState({
  //       videoing: videoing < size - 1 ? videoing + 1 : 0,
  //       pythonTime:new Date().getTime()
  //     });
  //   } else {
  //     let number = Math.round(Math.random() * (size - 1));
  //     this.setState({
  //       videoing: number,
  //       pythonTime:new Date().getTime()
  //     });
  //   }
  //   this.video.load();
  //   this.video.play();
  // };
  // onSeeked=(e)=>{
  //   console.log(e);
  //   this.video.load();
  //   this.video.play()
  // }
  // onStalled=()=>{
  //   this.setState({isShow:true})
  // }
  // onPlaying=()=>{
  //   this.setState({isShow:false})
  //   this.video.play()
  // }
}
